<template>
  <div>
    <!-- 选择未指派菜单司机 2018/3/7 11:44 zhangQ -->
    <Form ref="dispatchForm" :model="dispatchForm" :rules="roleDispatchForm" :label-width="80">
      <FormItem label="选择司机" prop="driverIds">
        <!--<autoSelect v-model="dispatchForm.driverIds" field="id" label="login_name" search-keys="login_namePy,login_name" :dataList="driverList" :dropAll="true" :multiple="true"></autoSelect>-->
        <!--<Select v-model="dispatchForm.driverIds" multiple >-->
        <!--<template v-for="item in driverList">-->
        <!--<Option :value="item.id" :key="item.id">{{ item.login_name }}</Option>-->
        <!--</template>-->
        <!--</Select>-->
        <Row>
          <i-col :span="8">
            <CheckboxGroup v-model="filterVal">
              <template v-for="item in truckTypeList">
                <Checkbox :label="item.id" :true-value="item.id">{{ item.name }}</Checkbox>
                <br>
              </template>
            </CheckboxGroup>
          </i-col>
          <i-col :span="16">
            <Transfer
              ref="transfer"
              :data="driverListTransfer"
              :target-keys="dispatchForm.driverIds"
              :render-format="renderFormat"
              :list-style="{width:'200px',height: '350px'}"
              filterable
              @on-change="checkDriverHandleChange"
              :filter-method="driverListFilter">
              <div :style="{float: 'right', margin: '5px'}">
                <Button type="ghost" size="small" @click="resetData">重置</Button>
              </div>
            </Transfer>
          </i-col>
        </Row>


      </FormItem>
      <FormItem label="选择地址" prop="address" v-if="isEdit">
        <!--<autoSelect v-model="dispatchForm.address" field="key" label="key" search-keys="key,keyPy" :dataList="addressList" :dropAll="true" style="width: 200px;" ></autoSelect>-->
        <Input v-model="dispatchForm.address" style="width: 200px;" :disabled="Boolean(dispatchDriverInfo.shippingAddress)"></Input>
      </FormItem>
      <FormItem label="联系人" prop="contacts" v-if="isEdit">
        <Input v-model="dispatchForm.contacts" style="width: 200px;" :disabled="Boolean(dispatchDriverInfo.contacts)"></Input>
      </FormItem>
      <FormItem label="电话" prop="mobile" v-if="isEdit">
        <Input v-model="dispatchForm.mobile" style="width: 200px;" :disabled="Boolean(dispatchDriverInfo.contactsMobile)"></Input>
      </FormItem>
      <div class="xlinkModal-footer">
        <Button type="primary" @click="onOk">确认</Button>
      </div>
    </Form>
  </div>
</template>

<script>
  import _ from 'lodash'
  import {getTruckTypeList} from '@api/backEnd/fleetControl'

  export default {
    name: 'check-driver-modal',
    data () {
      let dispatchForm = {driverIds: [], address: '', mobile: '', contacts: ''}
      let roleDispatchForm = {
        mobile: [{required: true, message: '电话不能为空', trigger: 'blur'}],
        contacts: [
          {required: true, message: '联系人不能为空', trigger: 'blur'},
          {pattern: /^[\u4e00-\u9fa5]{1,11}$/, message: '请输入2-12 位字符(汉字)！', trigger: 'blur'}]
      }
      let filterVal = []
      let truckTypeList = []
      let driverListTransfer = []
      let isEdit = true
      let datas = {dispatchForm, roleDispatchForm, isEdit, driverListTransfer, truckTypeList, filterVal}
      return datas
    },
    props: {
      dispatchDriverInfo: {
        type: Object,
        default () {
          return {}
        }
      },
      form: {
        type: Object,
        default () {
          return {}
        }
      },
      driverList: {
        type: Array,
        default () {
          return []
        }
      },
      addressList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    watch: {
      filterVal (val) {
        let transfer = this.$refs.transfer
        console.log('resFilterDataresFilterData', transfer.$refs.left)
        console.log('resFilterDataresFilterData', transfer.$refs.right)
        transfer.$refs.left['showFooter'] = true
        // this.$set(transfer.$refs.left, 'showFooter', true)
      }
    },
    computed: {},
    methods: {
      getTruckType () {
        getTruckTypeList().then(res => {
          this.truckTypeList = res.data.data
        })
      },
      renderFormat (item) {
        return item.label + ' - ' + item.description
      },
      resetData () {
        if (!this.form.driverIds) {
          this.form.driverIds = '[]'
        }
        this.dispatchForm.driverIds = JSON.parse(this.form.driverIds)
      },
      checkDriverHandleChange (newTargetKeys, direction, moveKeys) {
        this.dispatchForm.driverIds = newTargetKeys
      },
      driverListFilter (data, txt) {
        let upTxt = txt.toUpperCase()
        let lowTxt = txt.toLowerCase()
        let rightData = this.$refs.transfer.rightData
        if (rightData) {
          if (_.find(rightData, {'key': String(data.key)})) {
            return true
          }
        }
        if (this.filterVal && this.filterVal.length > 0) {
          let isType = _.some(this.filterVal, function (o) {
            return String(o) === String(data.row.type)
          })
          if (!isType) {
            return false
          }
        }
        return (_.includes(data.row['login_name'], upTxt) || _.includes(data.row['login_name'], lowTxt)) || (_.includes(data.row['truck_no'], upTxt) || _.includes(data.row['truck_no'], lowTxt)) || (_.includes(data.row['login_namePy'], upTxt) || _.includes(data.row['login_namePy'], lowTxt))
      },
      onOk () {
        if (!(this.dispatchForm.driverIds.length > 0)) {
          this.$Message.error('司机必选')
          return
        }
        if (!this.dispatchForm.address) {
          this.$Message.error('地址不能为空')
          return
        }
        this.$refs['dispatchForm'].validate((valid) => {
          if (valid) {
            this.$emit('dispatch', this.dispatchForm)
          } else {
          }
        })
      }
    },
    created () {
    },
    mounted () {
      let driverListTransfer = []
      this.driverList.forEach((item) => {
        driverListTransfer.push({
          key: item.id,
          label: item.login_name,
          description: item.truck_no,
          row: item
        })
      })
      this.driverListTransfer = driverListTransfer
      setTimeout(() => {
        if (this.form.address) {
          this.isEdit = false
          this.dispatchForm.driverIds = JSON.parse(this.form.driverIds)
          this.dispatchForm.address = this.form.address
          this.dispatchForm.contacts = this.form.contacts
          this.dispatchForm.mobile = this.form.mobile
        }
      }, 200)
      this.getTruckType()
      this.dispatchDriverInfo.shippingAddress && (this.dispatchForm.address = this.dispatchDriverInfo.shippingAddress)
      this.dispatchDriverInfo.contacts && (this.dispatchForm.contacts = this.dispatchDriverInfo.contacts)
      this.dispatchDriverInfo.contactsMobile && (this.dispatchForm.mobile = this.dispatchDriverInfo.contactsMobile)
    },
    components: {}
  }
</script>

<style scoped>

</style>
